@charset "utf-8";
@import "animate";
@import "reset";

/* CSS Document */

body {
  background: #0f0e10 url('../images/bg_1.jpg') no-repeat center center;
}

.main {
  @include center();
  background: url('../images/bg_2.png') no-repeat center center;
}

.tabs {
  height: 108px;
  width: 1620px;
  @include center();
  top: -495px;
  left: 4px;
  .tab {
    float: left;
    height: 108px;
    width: 263px;
    background-position: bottom center;
    &[data-type="day"] {
      background-image: url('../images/tab_1.png');
      &.active {
        background-image: url('../images/tab_1_active.png');
      }
    }
    &[data-type="week"] {
      background-image: url('../images/tab_2.png');
      &.active {
        background-image: url('../images/tab_2_active.png');
      }
    }
    &[data-type="month"] {
      background-image: url('../images/tab_3.png');
      &.active {
        background-image: url('../images/tab_3_active.png');
      }
    }
    &[data-type="total"] {
      background-image: url('../images/tab_4.png');
      &.active {
        background-image: url('../images/tab_4_active.png');
      }
    }
  }
}

.content {
  width: 1620px;
  height: 660px;
  @include center();
  top: 280px;
  > * {
    float: left;
  }
  .left {
    width: 760px;
    height: 660px;
    font-size: 26px;
    color: #fff;
    padding-top: 50px;
    > .item {
      width: 687px;
      height: 174px;
      line-height: 192px;
      margin-bottom: 22px;
      background-size: cover;
      padding-left: 245px;
      position: relative;
      .headimgurl {
        position: absolute;
        top: 12px;
        bottom: 0;
        left: 88px;
        margin: auto;
        width: 115px;
        height: 115px;
        border-radius: 115px;
        background-size: cover;
        background-position: center center;
      }
      > * {
        float: left;
        &.nickname {
          width: 260px;
        }
        &.score {
          padding-left: 5px;
        }
      }
      &:nth-child(1) {
        background-image: url('../images/rank_1.png');
        .score {
          color: #eab704;
        }
      }
      &:nth-child(2) {
        background-image: url('../images/rank_2.png');
        .score {
          color: #9adfff;
        }
      }
      &:nth-child(3) {
        height: 156px;
        line-height: 156px;
        background-image: url('../images/rank_3.png');
        .headimgurl {
          top: -1px;
        }
        .score {
          color: #d9ab74;
        }
      }
    }
  }
  .right {
    width: 860px;
    height: 660px;
    font-size: 15px;
    padding-top: 90px;
    color: #fff;
    .score,
    .index {
      color: #ea5504;
    }
    .item {
      float: left;
      margin-left: 60px;
      margin-bottom: 42px;
      padding-left: 96px;
      position: relative;
      width: 357px;
      height: 90px;
      background-image: url('../images/rank_4.png');
      line-height: 90px;
      > * {
        float: left;
      }
      .index {
        height: 30px;
        line-height: 30px;
        position: absolute;
        left: -24px;
        top: 0;
        bottom: 0;
        margin: auto;
      }
      .nickname {
        width: 155px;
        padding-left: 5px;
      }
      .headimgurl {
        position: absolute;
        left: 11px;
        top: -4px;
        bottom: 0;
        margin: auto;
        width: 70px;
        height: 70px;
        border-radius: 35px;
        background-size: cover;
        background-position: center center;
      }
      &.arrow {
        background: none;
        padding-left: 26px;
        padding-top: 24px;
        &:before {
          content: '';
          display: block;
          width: 38px;
          height: 38px;
          background: url('../images/rank_5.png') no-repeat center center;
        }
      }
    }
  }
}
